<!--
 * @Date: 2024-11-04 10:20:06
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-05 09:47:50
 * @Description: 表格功能按钮配置
-->
<template>
  <vxe-modal :="dialogAttrs" v-model="dialogState.visible" @close="handleClose">
    <ToolbarBtnTable ref="btnTableRef" :btnsData="dialogState.btnsData"/>
    <template #footer>
      <el-button size="default" type="primary" @click="handleConfirm">确定</el-button>
      <el-button size="default" @click="handleClose">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
import { baseAttrs } from '@/components/dialogs/cfg/base-cofig.js'
import { ref, reactive } from 'vue';

import ToolbarBtnTable from './components/ToolbarBtnTable.vue'

const emits = defineEmits(['confirm'])

const dialogAttrs = reactive({
  ...baseAttrs,
  title: '功能按钮配置',
  width: '60%',
  height: '65%',
  showZoom: false,
  position: { top: 150 },
  showClose: true,
  fullscreen: false,
});
const dialogState = reactive({
  visible: false,
  btnsData: []
})

const btnTableRef = ref()
const handleOpen = (btnsData) => {
  dialogState.btnsData = btnsData
  dialogState.visible = true
}
const handleReset = () => {
  dialogState.visible = false
}
const handleClose = () => {
  dialogState.visible = false
}
const handleConfirm = () => {
  const tableData = btnTableRef.value.getTableData()
  emits('confirm', tableData)
  dialogState.visible = false
}

defineExpose({
  handleOpen
})

</script>

<style lang="scss" scoped>

</style>